<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { BaiduMap, BmScale, BmNavigation, BmCityList } from 'vue-baidu-map-3x'

const point = reactive({
  lng: 114.096, // 经度最多180，分东西经
  lat: 22.546 // 纬度，最高90度，南北纬，分别在南北极
})

const zoom = ref(13)
</script>

<template>
  <baidu-map
    class="map"
    ak="xzvThyo6PqzT6vbb4GiSGv8d2Z8Eqg5M"
    v="3.0"
    type="API"
    :center="point"
    :zoom="zoom"
  >
    <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale>
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
  </baidu-map>
</template>

<style scoped>
.map {
  height: 100%;
}
</style>
